<template>
  <div class="explorer-root">
    <div class="sidebar">
      <ul>
        <li v-for="drive in drives" :key="drive.name">
          <div @click="selectDrive(drive)" :class="{active: selectedDrive && selectedDrive.name === drive.name}">
            <img src="/src/assets/home/computer.png" class="icon" />
            <span>{{ drive.label }}</span>
          </div>
          <ul v-if="selectedDrive && selectedDrive.name === drive.name">
            <li v-for="folder in drive.children" :key="folder.name" @click.stop="selectFolder(folder)" :class="{active: selectedFolder && selectedFolder.name === folder.name}">
              <img src="/src/assets/home/ziyuan.png" class="icon" />
              <span>{{ folder.name }}</span>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <div class="main">
      <h3>{{ currentPath }}</h3>
      <ul>
        <li v-for="item in currentList" :key="item.name" :class="{active: selectedFolder && item.name === selectedFolder.name}">
          <img :src="getIcon(item)" class="icon" />
          <span>{{ item.name }}</span>
        </li>
      </ul>
    </div>
  </div>
</template>
<script setup>
import { ref, computed } from 'vue'
import { fileSystem } from '../../../core/desktopData'

const drives = fileSystem.drives
const selectedDrive = ref(drives[0])
const selectedFolder = ref(null)

function selectDrive(drive) {
  selectedDrive.value = drive
  selectedFolder.value = null
}
function selectFolder(folder) {
  selectedFolder.value = folder
}
const currentList = computed(() => {
  if (selectedFolder.value) return selectedFolder.value.children || []
  if (selectedDrive.value) return selectedDrive.value.children || []
  return []
})
const currentPath = computed(() => {
  if (selectedFolder.value) return selectedDrive.value.label + '/' + selectedFolder.value.name
  if (selectedDrive.value) return selectedDrive.value.label
  return ''
})
function getIcon(item) {
  if (item.type === 'folder') return '/src/assets/home/ziyuan.png'
  if (item.type === 'drive') return '/src/assets/home/computer.png'
  return '/src/assets/login/person.png'
}
</script>
<style scoped>
.explorer-root { display: flex; height: 100%; font-family: 'Segoe UI', system-ui, sans-serif; }
.sidebar { width: 200px; background: #f6f8fa; border-radius: 8px 0 0 8px; padding: 16px 0; box-shadow: 2px 0 8px #0001; }
.sidebar ul { list-style: none; padding: 0 8px; }
.sidebar li { margin-bottom: 8px; }
.sidebar .icon { width: 24px; height: 24px; margin-right: 6px; }
.main { flex: 1; background: #fff; border-radius: 0 8px 8px 0; padding: 16px; box-shadow: 0 2px 8px #0001; }
.main h3 { margin-top: 0; font-size: 16px; }
.main ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 16px; }
.main li { width: 120px; display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 6px; transition: background 0.2s; cursor: pointer; }
.main li:hover { background: #f0f6ff; }
.icon { width: 32px; height: 32px; }
.sidebar .active { background: #eaf1fb; border-radius: 6px; }
.main li.active { background: #eaf1fb; }
</style> 